<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="编辑信息" :visible.sync="dialogVisible" @close="resetForm('editMemberForm')" width="720px">
        <el-form label-position='left' label-width="90px" :model="editMemberForm" :hide-required-asterisk='true' ref="editMemberForm" :rules="editMemberRules">
            <div class="dialog_title">基础信息</div>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="姓名" prop="nickname">
                        <el-input v-model="editMemberForm.nickname" placeholder="请输入人员姓名" style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="权限" prop="authorize">
                        <el-select v-model="editMemberForm.authorize" filterable multiple collapse-tags placeholder="请选择" style="width:100%">
                            <el-option v-for="item in authList" :key="item.id" :label="item.title" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="职能" prop="function">
                        <el-select v-model="editMemberForm.function" filterable multiple collapse-tags placeholder="请选择" style="width:100%">
                            <el-option v-for="item in funData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属部门" prop="department">
                        <el-cascader v-model="editMemberForm.department" filterable :props="defaultProps" :options="departList" :show-all-levels="false" style="width:100%"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="人员成本" prop="salary">
                        <el-input v-model="editMemberForm.salary" placeholder="请输入人员成本" style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="绩效系数" prop="coefficient">
                        <el-input v-model="editMemberForm.coefficient" placeholder="请输入绩效系数" style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="form_line"></div>
            <div class="dialog_title" style="margin-top:20px">账号信息</div>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="登录账户" prop="username">
                        <el-input v-model="editMemberForm.username" placeholder="请设置登录账号" style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="登录密码" prop="password">
                        <el-input v-model="editMemberForm.password" show-password placeholder="请设置登录密码" style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="飞书手机号" prop="contact_phone">
                        <el-input v-model="editMemberForm.contact_phone" placeholder="请输入飞书手机号" style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="唯一标识" prop="only">
                        <el-input v-model="editMemberForm.only" disabled placeholder="请输入唯一标识" style="width:100%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上级联系人" prop="partner_id">
                        <el-select popper-class="partner_select" v-model="editMemberForm.partner_id"  @focus="handleFocus" filterable placeholder="请选择" style="width:100%">
                            <el-option label="无" :value="0">
                            </el-option>
                            <el-option v-for="item in clipList" :key="item.id" :label="item.nickname" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('editMemberForm')" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('editMemberForm')" :loading="loading" :disabled="loading" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            authList: [],
            funData: [],
            departList: [],
            clipList:[],
            editMemberForm: {
                nickname: "",
                authorize: [],
                function: [],
                department: "",
                salary: "",
                coefficient: "",
                username: "",
                password: "",
                contact_phone: "",
                only: "",
                partner_id:"",
                id: "",
            },
            listInfo:{
                    department: 0,
                    function: 0,
                    limit: 20,
                    page: 1,
                    query: "",
                    status: [1]
            },
            editMemberRules: {
                nickname: [
                    {
                        required: true,
                        message: "请输入人员姓名",
                        trigger: ['blur', 'change']
                    },
                ],
                authorize: [
                    {
                        required: true,
                        message: "请选择要添加的权限",
                        trigger: ['blur', 'change']
                    },
                ],
                function: [
                    {
                        required: true,
                        message: "请选择要添加的职能",
                        trigger: ['blur', 'change']
                    },
                ],
                department: [
                    {
                        required: true,
                        message: "请选择部门",
                        trigger: ['blur', 'change']
                    },
                ],
                salary: [
                    {
                        required: true,
                        message: "请输入人员成本",
                        trigger: ['blur', 'change']
                    },
                ],
                coefficient: [
                    {
                        required: true,
                        message: "请输入绩效系数",
                        trigger: ['blur', 'change']
                    },
                ],
                username: [
                    {
                        required: true,
                        message: "请设置登录账号",
                        trigger: ['blur', 'change']
                    },
                ],
                // password: [
                //     {
                //         required: true,
                //         message: "请设置登录密码",
                //         trigger: "blur",
                //     },
                // ],
                contact_phone: [
                    {
                        required: true,
                        message: "请输入绑定飞书的手机号",
                        trigger: ['blur', 'change']
                    },
                ],
                only: [
                    {
                        required: true,
                        message: "请输入唯一标识码",
                        trigger: ['blur', 'change']
                    },
                ],
            },
            defaultProps: {
                children: "next",
                label: "name",
                value: "id",
                checkStrictly: true,
                emitPath: false,
            },
        };
    },
    created() {
        this.$bus.on("editMember", (value) => {
            this.dialogVisible = value.dialogVsb;
            let row = { ...value.row };
            this.editMemberForm.id = row.id;
            this.editMemberForm.nickname = row.nickname;
            this.editMemberForm.authorize = row.authorize;
            this.editMemberForm.function = row.function;
            this.editMemberForm.department = row.department;
            this.editMemberForm.salary = row.salary;
            this.editMemberForm.coefficient = row.coefficient;
            this.editMemberForm.username = row.username;
            this.editMemberForm.password = row.password;
            this.editMemberForm.contact_phone = row.contact_phone;
            this.editMemberForm.only = row.only;
            this.editMemberForm.partner_id = row.partner_id;
            this.getAuthList();
            this.getFuntList();
            this.getDepartList();
            this.getClipList()
        });
    },
    beforeDestroy() {
        this.$bus.off("editMember");
    },
    methods: {
         handleFocus(event) {
            document.getElementsByClassName('partner_select')[0].children[0].children[0].addEventListener('scroll', this.handleScroll);
            },
        handleScroll(event) {
            const { scrollHeight, scrollTop, clientHeight } = event.target;
            if (scrollHeight - (scrollTop + clientHeight) < 20) { // 距离底部10px时加载更多
                this.loadMore();
            }
        },
       async loadMore() {
            this.listInfo.page++
            const { data: res } = await this.$http.post("/adminapi/company/userList",this.listInfo);
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.clipList = [...this.clipList,...res.data.list];
            }
        },
        //获取紧急列表
        async getClipList() {
            // const { data: res } = await this.$http.post(
            //     "/adminapi/company/szClipperList"
            // );
             this.listInfo.page = 1;
            const { data: res } = await this.$http.post("/adminapi/company/userList",this.listInfo);
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.clipList = res.data.list;
            }
        },


        //获取角色列表
        async getAuthList() {
            const { data: res } = await this.$http.post(
                "adminapi/Jwtauth/user_auth_list"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.authList = res.data.list;
            }
        },

        //获取职能列表
        async getFuntList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/functionList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.funData = res.data;
            }
        },

        //获取部门列表
        async getDepartList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/departmentList",
                {
                    pid: 0,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.getTypeList(res.data)
                this.departList = res.data;
            }
        },

        // 递归
        getTypeList(data){
            data.forEach(element => {
                if(element.next.length>0){
                    this.getTypeList(element.next)
                }else{
                    element.next = undefined
                }
            });
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/company/userEdit",
                        this.editMemberForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$message({
                            message: "修改成功",
                            type: "success",
                        });
                        this.loading = false;
                        this.resetForm(formName);
                        this.$parent.getDataList(1);
                    }
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.dialog_title {
    font-size: 14px;
    font-weight: bold;
    color: #17233d;
    margin-bottom: 20px;
}
.form_line {
    border-top: 1px solid #dcdee2;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 10px;
}
</style>
